// 一 : 点击添加类型
$('.add').on('click', () => {
  // 1. 弹框
  let index = layer.open({
    type: 1,
    content: add_str, // 弹层里面显示内容
    title: '新增分类',
    area: ['500px', '300px'],
    // 和$.ajax的success效果一样
    success() {
      // 2. 点击确认添加
      $('.add-form').on('submit', e => {
        //2.1 阻止默认行为
        e.preventDefault()

        //2.2 收集数据
        let name = $('.add-form input[name=name]').val()
        let alias = $('.add-form input[name=alias]').val()
        let data = `name=${name}&alias=${alias}`

        console.log('data', data)

        //2.3 添加分类
        axios
          .post('http://api-breakingnews-web.itheima.net/my/article/addcates', data, {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          })
          .then(res => {
            console.log('res:', res)
            // 2.4 提示
            layui.layer.msg(res.data.message)
            // 2.5 关闭
            layui.layer.close(index)

            // 2.6 load
            load()
          })
      })
    },
  })
})

// 二 . 获取类别
load()
function load() {
  console.log('--------load----------')

  axios
    .get('http://api-breakingnews-web.itheima.net/my/article/cates', {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
    .then(res => {
      console.log('获取类型', res)

      //1. 获取数据
      let list = res.data.data

      //1.5 清空
      $('.layui-table tbody').empty()

      //2. 遍历
      list.forEach(obj => {
        let theTr = `<tr>
            <td>${obj.name}</td>
            <td>${obj.alias}</td>
            <td>
              <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    
              <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`
        $('.layui-table tbody').append(theTr)
      })
    })
}

// 三 . 编辑类型
$('.layui-table tbody').on('click', '.edit', e => {
  // this: 编辑按钮
  // 2. 获取数据
  let Id = e.target.getAttribute('myid')
  let name = e.target.getAttribute('data-name')
  let alias = e.target.getAttribute('data-alias')

  console.log('--', Id, name, alias)

  // 1. 弹框
  let index = layui.layer.open({
    type: 1,
    content: edit_str,
    title: '编辑分类',
    area: ['500px', '300px'],
    success() {
      console.log('successs------------------')

      // 3. 展示数据
      layui.form.val('edit', {
        Id,
        name,
        alias,
      })

      // 4.
      $('.add-form').on('submit', e => {
        // 阻止默认行为
        e.preventDefault()
        // 系列化
        let data = $('.add-form').serialize()
        console.log('data:', data)
        axios
          .post('http://api-breakingnews-web.itheima.net/my/article/updatecate', data, {
            headers: {
              Authorization: localStorage.getItem('token'),
            },
          })
          .then(res => {
            console.log('编辑类别')

            // 关闭
            layui.layer.close(index)

            // 获取
            load()
          })
      })
    },
  })
})

// 四 . 删除类型
$('.layui-table tbody').on('click', '.delete', e => {
  layui.layer.confirm('is not?', { icon: 3, title: '提示' }, function (index) {
    // 获取id
    let myid = e.target.getAttribute('myid')

    console.log('myid', myid)

    // do something
    axios
      .get(`http://api-breakingnews-web.itheima.net/my/article/deletecate/${myid}`, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('删除id')

        load()
      })

    layui.layer.close(index)
  })
})

/**
 *  字符串 *****************************************************************************************8
 */
// 添加类型的 - 弹出层上的 表单标签
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>`

// 3. 编辑分类
// 也要用在弹窗上面
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`
